<template>
  <div class="secondary-page">
    <!-- 子页滑动标签 -->
    <van-tabs
      title-active-color="#fb7299"
      color="#fb7299"
      line-width="30px"
      :ellipsis="false"
    >
      <van-tab
        class="sub-tab"
        v-for="(item, index) in options"
        :key="index"
        :title="item.name"
      >
        <sec-home-page v-if="index === 0" :videos="homeVideos"></sec-home-page>
        <sec-one-page
          v-if="index !== 0"
          :videos="videos[index - 1]"
        ></sec-one-page>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import SecHomePage from './SecHomePage'
import SecOnePage from './SecOnePage'
export default {
  props: ['NavName'],
  components: {
    SecHomePage,
    SecOnePage
  },
  data() {
    return {
      options: [],
      homeVideos: [],
      videos: []
    }
  },
  methods: {
    async fetchChildren() {
      const res = await this.$http.get(`/children/${this.NavName}`)
      this.options = res.data
    },
    async fecthVideos() {
      const res = await this.$http.get(`/videos/${this.NavName}`)
      const _ = require('lodash')
      console.log(res.data)
      const homeData = _.cloneDeep(res.data)
      homeData.forEach(el => {
        el.videoList = el.videoList.slice(0, 4)
      })
      this.homeVideos = homeData
      this.videos = res.data.slice(1)
    }
  },
  created() {
    this.fetchChildren()
    this.fecthVideos()
  }
}
</script>

<style lang="scss">
.secondary-page {
  margin-top: 10px;
  .van-tab__text {
    font-size: 14px !important;
  }
}
</style>
